<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏系统 - 首页</title>
    <!-- Bootstrap CSS 链接 -->
    <link rel="stylesheet" href="./common/css/bootstrap.min.css">
    <link rel="stylesheet" href="./common/css/carousel.css">
    <link rel="stylesheet" href="./common/css/index.css">
</head>

<body>
    <?php include 'conn.php'; ?>
    <?php include 'header.php'; ?>
    <div class="container mt-4">
        <!-- 搜索框 -->
        <div class="container mt-4">
            <form method="post" action="search_results.php">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" name="search" placeholder="搜索游戏..." aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="submit">搜索</button>
                    </div>
                </div>
            </form>
        </div>

 
        <!-- 轮播图 -->
        <div class="carousel">
            <div class="container1">
                <div id="slide">
                    <div class="item">
                        <img src="./images/1.jpg?v=2" alt="">
                    </div>
                </div>
            </div>
        </div>
        <?php
        include 'function.php';
        // 函数：获取指定类别下评分最高的游戏
        function getTopGamesByCategory($conn, $category_id, $limit = 4)
        {
            $sql = "SELECT * FROM games WHERE category_id = $category_id ORDER BY rating DESC LIMIT $limit";
            return executeQuery($conn, $sql);
        }

        // 函数：获取所有类别
        function getAllCategories($conn)
        {
            $sql = "SELECT * FROM categories";
            return executeQuery($conn, $sql);
        }



        // 获取所有类别
        $category_result = getAllCategories($conn);

        // 渲染页面
        ?>
        <!-- 游戏信息分类显示区域 -->
        <div class="mt-4">
            <h2>游戏信息分类</h2>
            <!-- 在这里添加你的游戏分类显示代码 -->
            <?php
            while ($category_row = mysqli_fetch_assoc($category_result)) {
                $category_id = $category_row['category_id'];
                $category_name = $category_row['name'];

                // 使用新函数获取游戏数据
                $result = getTopGamesByCategory($conn, $category_id);

                echo '<div class="row mt-4">';
                echo '<div class="card-body alert alert-success d-flex justify-content-between align-items-center">';
                echo '<h4 class="card-title m-0">' . $category_name . '</h4>';
                echo '<a href="category_details.php?category_id=' . $category_id . '" class="btn btn-custom">查看全部</a>';
                echo '</div>';

                while ($row = mysqli_fetch_assoc($result)) {
                    $game_id = $row['game_id'];
                    $title = $row['title'];
                    $description = $row['description'];
                    $rating = $row['rating'];
                    $image_path = $row['image_path'];

                    echo '<div class="col-md-3 mb-4">';
                    echo '<a href="games_details.php?game_id=' . $game_id . '">';
                    echo '<div class="card h-100 card-hover">';
                    echo '<img src="' . $image_path . '" class="card-img-top" alt="' . $title . '" style="width: 100%; height: 200px;">';
                    echo '<div class="card-body">';
                    echo '<h5 class="card-title">' . $title . '</h5>';
                    echo '<p class="card-text description">' . $description . '</p>';
                    echo '<p class="card-text"><small class="text-muted">评分: ' . $rating . '</small></p>';
                    echo '</div>';
                    echo '</div>';
                    echo '</a>';
                    echo '</div>';
                }

                echo '</div>';
                mysqli_free_result($result);
            }

            mysqli_free_result($category_result);

            // 关闭数据库连接
            closeConnection($conn);
            ?>
        </div>


        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <script>
            const leftBtn = document.querySelector(".buttons .left");
            const rightBtn = document.querySelector(".buttons .right");
            const slide = document.querySelector("#slide");

            let openClick = true;

            function nextSlide() {
                if (openClick) {
                    openClick = false;

                    const items = document.querySelectorAll(".item");
                    slide.appendChild(items[0]);

                    setTimeout(() => openClick = true, 1000);
                }
            }

            function previousSlide() {
                if (openClick) {
                    openClick = false;

                    const items = document.querySelectorAll(".item");
                    slide.prepend(items[items.length - 1]);

                    setTimeout(() => openClick = true, 1000);
                }
            }

            let intervalId = setInterval(nextSlide, 2000);

            slide.addEventListener("mouseenter", () => {
                clearInterval(intervalId);
            });

            slide.addEventListener("mouseleave", () => {
                intervalId = setInterval(nextSlide, 2000);
            });

            rightBtn.addEventListener("click", nextSlide);
            leftBtn.addEventListener("click", previousSlide);
        </script>
</body>

</html>